﻿/*污染物监测数据的折线图*/

function MonitorPollutant(container, config) {
    this.timepoints = [];
    this.SO2 = [];
    this.NO2 = [];
    this.NO = [];
    this.CO = [];
    this.O3 = [];
    this.O3_8H = [];
    this.PM25 = [];
    this.PM10 = [];
    this.AQI = [];
    this.AQILevel = [];
    this.PrimarryPollutant = [];
    this.PriPol = [];
    this.Mark = [];
    this.PlotLines = config["plotLines"] || null;
    this.height = config["height"] || null;
    this.width = config["width"] || null;
    this.xwidth = config["xwidth"] || null;
    this.subTitle = config["subTitle"] || null;
    this.container = container;
}

MonitorPollutant.prototype.tooltipFormatter = function (tooltip) {
    var index = tooltip.points[0].point.x, ret = '<middle>' + tooltip.x + '</middle><br>',
        point = tooltip.points[0].point,
        series = tooltip.points[0].series;
    var aqiVal = Highcharts.pick(point.value, point.y);

    ret += '<table class="table_tooltip">';
    ret += ('<tr><td colspan="5"><span style="color:' + series.color + '">\u25CF</span><strong>' + series.name +
            ': ' + aqiVal + "   " + AirIndex(aqiVal).Type + '</strong></td></tr>' +
            '<tr><td colspan="5">首要污染物: ' + pollutantNameSubTransform(this.PrimarryPollutant[index]) + '</td></tr>' +
            '<tr><td width="55px" align="right">SO<sub><span>2</span></sub>:</td><td width="35px" class="color-blue"> ' + this.SO2[index] + '</td><td width="10px">&nbsp;</td><td align="right" width="55px">CO:</td><td width="35px" class="color-blue"> ' + this.CO[index] + '</td></tr>' +
        '<tr><td align="right">NO:</td><td class="color-blue" class="color-blue"> ' + this.NO[index] + '</td><td>&nbsp;</td><td align="right">NO<sub><span>2</span></sub>:</td><td class="color-blue"> ' + this.NO2[index] + '</td></tr>' +
          '<tr><td align="right">PM<sub><span>2.5</span></sub>:</td><td class="color-blue"> ' + this.PM25[index] + '</td><td>&nbsp;</td><td align="right">PM<sub><span>10</span></sub>:</td><td class="color-blue"> ' + this.PM10[index] + '</td></tr>');

    if (this.O3_8H.length == 0) {
        ret += '<tr><td align="right">O<sub><span>3</span></sub>:</td><td colspan="4" class="color-blue"> ' + this.O3[index] + '</td></tr>';
    }
    else {
        ret += '<tr><td align="right">O<sub><span>3</span></sub>: </td><td class="color-blue">' + this.O3[index] + '</td><td align="right">&nbsp;</td><td>O<sub>3</sub>_8H:</td><td class="color-blue"> ' + this.O3_8H[index] + '</td></tr>';
    }

    ret += '</table>';
    return ret;
};

MonitorPollutant.prototype.getStep = function () {
    var _ = this,
        width = $("#" + _.container).width(),
        count = _.timepoints.length,
        num = 1,
        xWidth = _.xwidth;
    while (xWidth * count > width) {
        num = num * 2;
        count = count / 2;
    }
    return num;
}

MonitorPollutant.prototype.getChartOptions = function () {
    var pollutant = this;
    return {
        chart: {
            renderTo: pollutant.container,
            height: pollutant.height,
            width: pollutant.width
        },
        credits: {
            enabled: false
        },
        title: {
            text: pollutant.subTitle + '实时AQI'
        },
        xAxis: [{
            categories: pollutant.timepoints,
            tickInterval: pollutant.getStep()
        }],
        yAxis: {
            min: 0,
            title: {
                text: null
            },
            labels: {
                style: {
                    fontSize: '10px'
                }
            },
            plotLines: pollutant.PlotLines
        },
        tooltip: {
            //crosshairs:true,
            crosshairs: [
              {
                  width: 1,
              }
            ],
            useHTML: true,
            shared: true,
            formatter: function () {
                return pollutant.tooltipFormatter(this);
            }
        },
        series: [{
            name: 'AQI实况值',
            type: 'spline',
            color: '#434348',
            data: pollutant.AQI
        }]
    }
};

MonitorPollutant.prototype.onChartLoad = function (chart) {
};

MonitorPollutant.prototype.createChart = function () {
    var pollutant = this;
    this.chart = new Highcharts.Chart(pollutant.getChartOptions(), function (chart) {
        pollutant.onChartLoad(chart);
    });
};

MonitorPollutant.prototype.initData = function (jsonData) {

    var pollutant = this;
    if (jsonData.length > 0) {
        for (var i = 0, count = jsonData.length; i < count; i++) {
            pollutant.timepoints.push(formatDate(GetTimeFromJsonString(jsonData[i].TimePoint), "hh时"));
            pollutant.SO2.push(jsonData[i].SO2 * 1000);
            pollutant.NO2.push(jsonData[i].NO2 * 1000);
            pollutant.NO.push(jsonData[i].NO * 1000);
            pollutant.CO.push((jsonData[i].CO).toFixed(1));
            pollutant.O3.push(jsonData[i].O3 * 1000);
            if ("undefined" != typeof (jsonData[i].O3_8H)) {
                pollutant.O3_8H.push(jsonData[i].O3_8H * 1000);
            }

            pollutant.PM25.push(jsonData[i].PM2_5 * 1000);
            pollutant.PM10.push(jsonData[i].PM10 * 1000);
            pollutant.AQI.push(jsonData[i].AQI);
            pollutant.AQILevel.push(jsonData[i].AQILevel);
            pollutant.PrimarryPollutant.push(jsonData[i].PrimaryPollutant);
        }
    }

    pollutant.createChart();

};

